import React, { Component } from 'react'

class Longin extends Component {
 render(){
  return (
    <div>
      <h1>登录页面</h1>
    </div>
  )
 }
}
class Admin extends Component{
  render(){
    return (
      <div>
        <h1>管理员页面</h1>
      </div>
    )
  }
}
// 利用高阶组件实现登录鉴权
function AuthComponent(Component) {
  const NewComponent = (props)=>{
    return props.isLogin ? <Component {...props}></Component> : <Longin></Longin>
  }
  return NewComponent
  }
  const NewAdmin = AuthComponent(Admin)
export class App extends Component {
  state = {
    isLogin:true
  }
  render() {
    return (
      <div>
        {/* 不使用高阶组件实现的 */}
        {/* <button onClick={this.check}>{this.state.isLogin?<Admin/>:<Longin/>}</button> */}
        {/* 使用高阶组件实现的 */}
        <NewAdmin isLogin={this.state.isLogin}></NewAdmin>
        <button onClick={this.check}>{this.state.isLogin?'退出':'登录'}</button>
      </div>
    )
  }
  check=()=>{
    this.setState({
      isLogin:!this.state.isLogin
    })
  }
}

export default App